<template>
    <div :style="mainStyle">
        <navigation-bar :title="title" :onLeftButtonClick="function(){
        toBack()}" :rightIcon="' '"></navigation-bar>
        <image :src="course.image_path" class="head-img"></image>
        <top-tab-bar :tab-titles="tabTitles"
                     :tab-styles="tabStyles"
                     title-type="text"
                     @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
            <div class="item-container" :style="contentStyle">
                <div class="course-desc-box">
                    <text class="course-name">{{course.name}}</text>
                    <div class="hr"></div>
                    <text class="course-desc">课程分类: {{course.category_name}} </text>
                    <text class="course-desc">课程年级: {{course.grade_name}} </text>
                    <text class="course-desc">主讲教师: {{course.speaker_name}} </text>
                </div>
            </div>
            <div class="item-container" :style="contentStyle">
                <list :style="webStyle">
                    <cell>
                        <wxc-cell
                                :label="item.name"
                                :key="index"
                                v-for="(item,index) in course.lessons"
                                :has-arrow="false"
                                @wxcCellClicked="wxcCellClicked(item)"
                        >
                            <slot name="value">
                                <text class="icon-text" v-if="item.status === 'ready'">直播未开始</text>
                                <text class="icon-text" v-else-if="item.status === 'live'">观看直播</text>
                                <text class="icon-text" v-else>观看回放</text>
                            </slot>
                        </wxc-cell>
                    </cell>
                </list>
            </div>
        </top-tab-bar>

    </div>
</template>
<style lang="scss" scoped>
    @import '../config/styles.scss';

    .head-img {
        width: 750px;
        height: 300px;
    }

    .item-container {
        width: 750px;
        background-color: #ffffff;
    }

    .course-desc-box {
        padding: 50px;
    }

    .course-name {
        margin-bottom: 15px;
        color: #434A54;
        font-size: 36px;
        font-weight: bold;
    }

    .course-desc {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 26px;
        color: #999999
    }

    .hr {
        width: 650px;
        margin-top: 10px;
        margin-bottom: 10px;
        height: 1px;
        background: #999999;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .icon-text {
        font-size: 24px;
        color: #999999
    }
    .cell-label-text{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
</style>

<script>
  import NavigationBar from './widget/NavigationBar.vue'
  import TopTabBar from './widget/TopTabBar.vue'
  import { getEntryPageStyle, getContentStyle } from '../config/Config'
  import { Utils, WxcCell } from 'weex-ui'
  import course from '../core/net/course'
  import user from '../core/net/user'
  import Config from '../config/HomeTabConfig'

  export default {
    components: {
      NavigationBar,
      TopTabBar,
      WxcCell,
    },
    data: () => {
      return {
        title: '',
        courseId: '',
        tabTitles: [
          {
            title: '介绍',
          },
          {
            title: '目录',
          },
        ],
        tabStyles: Config.tabStyles,
        course: {},
        userData: {},
        mainStyle: {},
        webStyle: {height: '1334px', width: '750px'},
      }
    },
    methods: {
      init () {
        this.loadCourse()
        this.loadUserInfo()
      },
      wxcCellClicked (item) {
        switch (item.status) {
          case 'ready':
            break
          default:
            this.jumpWithParams('WebPage', {
              url: `http://user.test.yarsenal.com/app/lesson-play/${item.id}/${this.userData.id}`,
            })
            break
        }
      },
      wxcTabBarCurrentTabSelected () {
      },
      loadUserInfo () {
        user.getUserInfoDao().then((res) => {
          if (res && res.result) {
            this.userData = res.data
          }
        })
      },
      loadCourse () {
        course.getCourseDesc(this.courseId).then((res) => {
          this.course = res.data
        })
      },
    },
    computed: {
    },
    created () {
      this.title = this.getQuery().title
      this.courseId = this.getQuery().course
      this.mainStyle = getEntryPageStyle(Utils)
      this.contentStyle = getContentStyle(Utils.env.getScreenHeight(), this.tabStyles.height + 300)
      this.init()
    },
  }
</script>
